<template>
  <div :id="id" :style="style"></div>
</template>
<script>
  export default {
    name: "BehaviorTotal",
    data() {
      return {
        //echarts实例
        chart: ""
      };
    },
    props: {
      //父组件需要传递的参数：id，width，height，option
      id: {
        type: String
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "300px"
      },
      option: {
        type: Object,
        //Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
        //使用闭包保证一个vue实例拥有自己的一份props
        default() {
          return {
            legend: {
              data: ["行为数"]
            },
            xAxis: {
              data: []
            },
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "行为数",
                type: "line",
                data: []
              }
            ]
          };
        }
      }
    },
    computed: {
      style() {
        return {
          height: this.height,
          width: this.width
        };
      }
    },
    mounted() {

      this.init();

    },
    methods: {
      init() {
        //window.addEventListener("resize", this.chart.resize);
        this.chart = this.$echarts.init(document.getElementById(this.id));
        this.$axios.get("statistics/behavioral/total").then(successResponse => {
          console.log(successResponse.data)

          this.option.xAxis.data=successResponse.data.time
          this.option.series[0].data=successResponse.data.total
        }).catch(failResponse => {
        })
        this.chart.setOption(this.option);
      },
      getBehavior(){

      }
    },
    //在Chart.vue中加入watch
    watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          if (this.chart) {
            if (newVal) {
              this.chart.setOption(newVal);
            } else {
              this.chart.setOption(oldVal);
            }
          } else {
            this.init();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    }
  };
</script>
